<!DOCTYPE html>
<html lang="">

<head>
  <title><%= VUE_APP_TITLE %></title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="author" content="亿度物联" />
  <meta name="description" content="这是一个轻量级的操作平台前端解决方案，适用于多数开发场景。基于vue2x开发框架和热门的 element-ui组件库实现。内置了Vue全家桶技术栈、打包Gzip技术，引入了bootstrap-icons、Font Awesome4等图标库，封装了动态路由、权限验证、请求拦截、响应拦截、接口封装和复制文本、数字千位符、cdn方法、全局监听摁钮的防抖、事件节流等实用小功能。集成了一系列常用好用的小插件，免去技术选型和技术试错的困扰。运用了vue过滤器、vue指令、vue混入、vue组件，将vue的优势发挥的淋漓尽致。最大的优点就是足够轻量，易拓展、好上手、可塑性强">
  <meta name="keywords" content="vue,vue全家桶,开源vue架构,初始化vue架构,vue底层配置,vue项目">
  <meta name="copyright" content="版权亿度物联所有。All Rights Reserved" />
  <link rel="icon" type="image/x-ico" href="/img/logo.icon">
  <% for (let path of htmlWebpackPlugin.options.CDNs.css) { %>
    <link href="<%= path %>" rel="preload" as="style" />
    <link href="<%= path %>" rel="stylesheet" />
  <% } %>
  <% for (let path of htmlWebpackPlugin.options.CDNs.js) { %>
    <link href="<%= path %>" rel="preload" as="script" />
  <% } %>
</head>

<body>
  <div id="app">
    <!-- 首屏加载动画 -->
    <div class="loading">
      <div style="text-align: center;">
        <div class="loading-icon">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="loading-text">Loading</div>
      </div>
    </div>
    <style>
      .loading {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .loading-icon {
        width: 150px;
        height: 100px;
      }

      .loading-icon,
      .loading-icon>div {
        position: relative;
        box-sizing: border-box;
      }

      .loading-icon {
        display: block;
        font-size: 0;
        color: #000;
      }

      .loading-icon.la-dark {
        color: #333;
      }

      .loading-icon>div {
        display: inline-block;
        float: none;
        background-color: currentColor;
        border: 0 solid currentColor;
      }



      .loading-icon>div:nth-child(1) {
        position: absolute;
        bottom: 32%;
        left: 18%;
        width: 14px;
        height: 14px;
        border-radius: 100%;
        transform-origin: center bottom;
        animation: ball-climbing-dot-jump 0.6s ease-in-out infinite;
      }

      .loading-icon>div:not(:nth-child(1)) {
        position: absolute;
        top: 0;
        right: 0;
        width: 14px;
        height: 2px;
        border-radius: 0;
        transform: translate(60%, 0);
        animation: ball-climbing-dot-steps 1.8s linear infinite;
      }

      .loading-icon>div:not(:nth-child(1)):nth-child(2) {
        animation-delay: 0ms;
      }

      .loading-icon>div:not(:nth-child(1)):nth-child(3) {
        animation-delay: -600ms;
      }

      .loading-icon>div:not(:nth-child(1)):nth-child(4) {
        animation-delay: -1200ms;
      }

      @keyframes ball-climbing-dot-jump {
        0% {
          transform: scale(1, 0.7);
        }

        20% {
          transform: scale(0.7, 1.2);
        }

        40% {
          transform: scale(1, 1);
        }

        50% {
          bottom: 125%;
        }

        46% {
          transform: scale(1, 1);
        }

        80% {
          transform: scale(0.7, 1.2);
        }

        90% {
          transform: scale(0.7, 1.2);
        }

        100% {
          transform: scale(1, 0.7);
        }
      }

      @keyframes ball-climbing-dot-steps {
        0% {
          top: 0;
          right: 0;
          opacity: 0;
        }

        50% {
          opacity: 1;
        }

        100% {
          top: 100%;
          right: 100%;
          opacity: 0;
        }
      }



      .loading-text {
        margin-top: 35px;
        font-size: 22px;
        letter-spacing: 7px;
        font-family: Arial, Helvetica, sans-serif;
        color: #666;
        animation: loading-animation 1s ease-in infinite alternate;
      }

      @keyframes loading-animation {
        0% {
          filter: blur(0px);
          transform: skew(0deg);
        }

        100% {
          filter: blur(3px);
          transform: skew(-4deg);
        }
      }
    </style>
  </div>






  <% for (let path of htmlWebpackPlugin.options.CDNs.js) { %>
    <script defer src="<%= path %>"></script>
  <% } %>
</body>

</html>